<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form">

            <div class="layui-form-item">
                <label class="layui-form-label required">手机号</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机"
                           value="" class="layui-input">

                </div>
                <div class="layui-form-mid" style="padding: 0!important;">
                    <button type="button" class="layui-btn layui-btn-primary" lay-on="get-user-info">获取用户信息</button>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">用户ID</label>
                <div class="layui-input-block">
                    <input type="text" disabled name="id" lay-verify="required"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">用户名</label>
                <div class="layui-input-block">
                    <input type="text" disabled name="username"
                           value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">推荐人ID</label>
                <div class="layui-input-block">
                    <input type="text" disabled name="p_id" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">消费</label>
                <div class="layui-input-inline">
                    <input type="text"  name="addScore" value="" class="layui-input">
                </div>
                <div class="layui-form-mid" style="padding: 0!important;">
                    <button class="layui-btn layui-btn-primary"  lay-on="compute">计算</button>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">计算结果</label>
                <div class="layui-input-block">
                    <div class="layui-form">
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>角色</th>
                                <th>手机号</th>
                                <th>用户名</th>
                                <th>原有积分</th>
                                <th>增加积分</th>
                            </tr>
                            </thead>
                            <tbody id="tb">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认</button>
                </div>
            </div>

        </div>


    </div>
</div>

<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'util'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;


        util.event('lay-on', {
            // 获取验证码
            "get-user-info": function (othis) {

                $.ajax({
                    url: "/api/member/detail",
                    type: "get",
                    data: {'tel': $('input[name="tel"]').val()},
                    success: function (data) {

                        if (data&&data.data&&data.data.tel) {
                            $('input[name="id"]').val(data.data.id);
                            $('input[name="username"]').val(data.data.username);
                            $('input[name="score"]').val(data.data.score);
                            $('input[name="p_id"]').val(data.data.pid);
                        } else {
                            layer.msg("查无此人");
                            $('input[name="id"]').val("");
                            $('input[name="username"]').val("");
                            $('input[name="score"]').val("");
                            $('input[name="p_id"]').val("");
                        }

                    }
                });


            },
            "compute":function () {
                $.ajax({
                    url: "/api/member/compute",
                    type: "get",
                    data: {'tel': $('input[name="tel"]').val(),
                    'score':$('input[name="addScore"]').val()},
                    success: function (data) {
                        layer.msg(data.msg);
                        if (data.code!=0){
                            return ;
                        }
                        var str="";
                        for (let i=0; i<data.data.length; i++) {
                            str+='<tr><td>'+data.data[i].hint+'</td><td>'+data.data[i].tel+'</td><td>'+data.data[i].username+'</td><td>'+data.data[i].score+'</td><td>'+data.data[i].addScore+'</td></tr>'
                        }
                        $('#tb').html(str);

                    }
                });
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                url: "/api/member/score",
                type: "get",
                data: {'tel': $('input[name="tel"]').val(),
                    'score':$('input[name="addScore"]').val()},
                success: function (data) {
                    layer.msg(data.msg);
                    if (data.code == 0) {
                        $('input[name="username"]').val("");
                        $('input[name="tel"]').val("");
                        $('input[name="addScore"]').val("");
                        $('input[name="id"]').val("");
                        $('input[name="p_id"]').val("");
                    }
                    $('#tb').html("");

                }
            });

            return false;
        });

    });
</script>
</body>
</html>